<template>
  <div class="radio-box">
    <el-radio @change="handleRadioChange" v-model="radioSelected" label="all" border>全选</el-radio>
    <el-radio @change="handleRadioChange" v-model="radioSelected" label="model-1" border>型号1</el-radio>
    <el-radio @change="handleRadioChange" v-model="radioSelected" label="model-2" border>型号2</el-radio>
  </div>
</template>

<script>
import EventBus from '../EventBus'
import Bus from '../EventBus/events'

export default {
  name: 'Radio',
  data() {
    return {
      radioSelected: 'all'
    }
  },
  methods: {
    handleRadioChange() {
      EventBus.$emit(Bus.RADIO_CHANGE, {
        radioSelected: this.radioSelected
      })
    }
  }
}
</script>

<style lang="less">
.radio-box {
  position: absolute;
  right: 220px;
  bottom: 20px;

  display: flex;

  .el-radio {
    margin: 0 5px;
    padding: 0 10px 0 10px;
    width: 100px;
    border: 1.5px solid #409EFF;
    color: #eeeeee;

    display: flex;
    justify-content: center;
    align-items: center;
    
    .el-radio__label {
      font-size: 20px;
      font-weight: bolder;
    }
  }
}
</style>